{% extends "base.html" %}
{% block title %}统计（Edgewonk风格）{% endblock %}
{% block content %}
<div class="container mt-4">
    <!-- 导航栏 -->
    <div class="side-navbar mb-3">
        <a class="navbar-brand" href="{{ url_for('index') }}">
            <i class="fas fa-chart-line"></i> Trading Analyzer
        </a>
        <a class="nav-link" href="{{ url_for('trades') }}">
            <i class="fas fa-list"></i> Trades
        </a>
        <a class="nav-link" href="{{ url_for('statistics_page') }}">
            <i class="fas fa-chart-bar"></i> Statistics
        </a>
    </div>
    
    <!-- 时间和过滤器区域 -->
    <div class="row mb-3">
        <div class="col-12 d-flex align-items-center justify-content-end">
            <input id="ew_dateRange" class="form-control form-control-sm" style="max-width:220px;" placeholder="选择时间区间" readonly>
            <button id="ew_selectAll" class="btn btn-sm btn-outline-secondary ms-2">全部</button>
            <button id="ew_toggleFilter" class="btn btn-sm btn-outline-primary ms-2">
                <i class="fas fa-filter"></i> 过滤器
            </button>
            <button id="statisticsConfigBtn" class="btn btn-sm btn-outline-secondary ms-2">
                <i class="fas fa-cog"></i> 配置
            </button>
        </div>
    </div>
    
    <!-- 过滤器面板 -->
    <div id="filterPanel" class="card mb-3" style="display: none;">
        <div class="card-header bg-light">
            <h6 class="mb-0"><i class="fas fa-filter"></i> 交易过滤器</h6>
        </div>
        <div class="card-body">
            <!-- 第一行：基础过滤条件 -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">品种</label>
                    <select id="filter_symbol" class="form-select form-select-sm" multiple>
                        <option value="">所有品种</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">方向</label>
                    <select id="filter_direction" class="form-select form-select-sm" multiple>
                        <option value="">所有方向</option>
                        <option value="Long">多头</option>
                        <option value="Short">空头</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">交易类型</label>
                    <select id="filter_trade_type" class="form-select form-select-sm" multiple>
                        <option value="">所有类型</option>
                        <option value="Scalp">Scalp</option>
                        <option value="Swing">Swing</option>
                        <option value="Position">Position</option>
                        <option value="Intraday">Intraday</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">时段</label>
                    <select id="filter_session" class="form-select form-select-sm" multiple>
                        <option value="">所有时段</option>
                        <option value="RTH">RTH</option>
                        <option value="ETH">ETH</option>
                    </select>
                </div>
            </div>
            
            <!-- 第一行补充：Side过滤 -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">Side</label>
                    <select id="filter_side" class="form-select form-select-sm" multiple>
                        <option value="">所有Side</option>
                        <option value="Left">Left</option>
                        <option value="Right">Right</option>
                    </select>
                </div>
                <div class="col-md-9 mb-3">
                    <!-- 空白占位 -->
                </div>
            </div>
            
            <!-- 第二行：入场和离场理由 -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">入场理由</label>
                    <select id="filter_entry_reason" class="form-select form-select-sm" multiple>
                        <option value="">所有理由</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">离场理由</label>
                    <select id="filter_other_exit_reason" class="form-select form-select-sm" multiple>
                        <option value="">所有理由</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">止损理由</label>
                    <select id="filter_stop_loss_reason" class="form-select form-select-sm" multiple>
                        <option value="">所有理由</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">止盈理由</label>
                    <select id="filter_take_profit_reason" class="form-select form-select-sm" multiple>
                        <option value="">所有理由</option>
                    </select>
                </div>
            </div>
            
            <!-- 第三行：数值范围和状态过滤 -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">盈亏状态</label>
                    <select id="filter_profit_status" class="form-select form-select-sm">
                        <option value="">所有交易</option>
                        <option value="profitable">盈利交易</option>
                        <option value="losing">亏损交易</option>
                        <option value="breakeven">持平交易</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">净利润范围</label>
                    <div class="input-group input-group-sm">
                        <input id="filter_profit_min" type="number" class="form-control" placeholder="最小" step="0.01">
                        <span class="input-group-text">~</span>
                        <input id="filter_profit_max" type="number" class="form-control" placeholder="最大" step="0.01">
                    </div>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">持仓时间(分钟)</label>
                    <div class="input-group input-group-sm">
                        <input id="filter_duration_min" type="number" class="form-control" placeholder="最小" min="0">
                        <span class="input-group-text">~</span>
                        <input id="filter_duration_max" type="number" class="form-control" placeholder="最大" min="0">
                    </div>
                </div>
                
                <div class="col-md-3 mb-3 d-flex align-items-end">
                    <div class="btn-group w-100" role="group">
                        <button id="applyFilter" class="btn btn-primary btn-sm">
                            <i class="fas fa-check"></i> 应用过滤
                        </button>
                        <button id="clearFilter" class="btn btn-secondary btn-sm">
                            <i class="fas fa-times"></i> 清除
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 第四行：过滤器管理 -->
            <div class="row">
                <div class="col-12">
                    <div class="border-top pt-3 mt-2">
                        <label class="form-label fw-bold">过滤器管理</label>
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <input id="filterNameInput" type="text" class="form-control form-control-sm" placeholder="输入过滤器名称保存当前条件...">
                            </div>
                            <div class="col-md-8 mb-2">
                                <div class="btn-group" role="group">
                                    <button id="saveFilter" class="btn btn-success btn-sm">
                                        <i class="fas fa-save"></i> 保存过滤器
                                    </button>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="savedFiltersDropdown" data-bs-toggle="dropdown">
                                            <i class="fas fa-folder-open"></i> 已保存过滤器
                                        </button>
                                        <ul class="dropdown-menu" id="savedFiltersList">
                                            <li><span class="dropdown-item-text text-muted">暂无保存的过滤器</span></li>
                                        </ul>
                                    </div>
                                    <button id="manageFilters" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-cog"></i> 管理
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="dashboard-grid" style="display:grid;grid-template-columns:repeat(4,1fr);row-gap:1.5rem;gap:1.5rem;">


        <div class="card shadow-sm dashboard-card" data-id="summary" data-span="4" style="grid-column:span 4;min-width:320px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>Summary</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#summaryBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body px-4 py-3 dashboard-card-body" id="summaryBody">
                <div id="ew_summaryRange" class="text-center text-muted small mb-3"></div>
                <!-- 过滤状态提示 -->
                <div id="filterStatus" class="alert alert-info small mb-3" style="display: none;">
                    <i class="fas fa-filter"></i> 当前显示已过滤的交易数据
                    <button id="showFilterDetails" class="btn btn-sm btn-outline-info ms-2">查看过滤条件</button>
                </div>
                <!-- 主数据：总净利润、胜率、最大回撤、盈亏比 -->
                <div class="row justify-content-center mb-4"><!-- mb-4 删除 -->
                    <div class="col-auto text-center">
                        <div class="text-muted small mb-1">总净利润</div>
                        <div id="ew_totalProfit" class="fw-bold fs-2" style="letter-spacing:1px;"></div>
                    </div>
                    <div class="col-auto text-center">
                        <div class="text-muted small mb-1">胜率</div>
                        <div id="ew_winRate" class="fw-bold fs-2" style="letter-spacing:1px;"></div>
                    </div>
                    <div class="col-auto text-center">
                        <div class="text-muted small mb-1">盈亏比</div>
                        <div id="ew_profitFactor" class="fw-bold fs-2" style="letter-spacing:1px;"></div>
                    </div>
                    <div class="col-auto text-center">
                        <div class="text-muted small mb-1">数学期望</div>
                        <div id="ew_mathexp" class="fw-bold fs-2" style="letter-spacing:1px;"></div>
                    </div>
                    <div class="col-auto text-center">
                        <div class="text-muted small mb-1">最大回撤</div>
                        <div id="ew_maxDrawdown" class="fw-bold fs-2" style="letter-spacing:1px;"></div>
                    </div>
                </div>
                <hr class="my-2" style="opacity:.15;">
                <!-- 次数据1：总交易数、盈利笔数、亏损笔数 -->
                <div class="row justify-content-center mb-2">
                    <div class="col-4 text-center">
                        <div class="text-muted small">总交易数</div>
                        <div id="ew_totalTrades" class="fw-bold fs-5"></div>
                    </div>
                    <div class="col-4 text-center">
                        <div class="text-muted small">盈利笔数</div>
                        <div id="ew_winningTrades" class="fw-bold fs-5 text-success"></div>
                    </div>
                    <div class="col-4 text-center">
                        <div class="text-muted small">亏损笔数</div>
                        <div id="ew_losingTrades" class="fw-bold fs-5 text-danger"></div>
                    </div>
                </div>
                <!-- 次数据2：平均盈利、平均亏损、最大盈利、最大亏损 -->
                <div class="row justify-content-center">
                    <div class="col-3 text-center">
                        <div class="text-muted small">平均盈利</div>
                        <div id="ew_avgWin" class="fw-bold fs-6 text-success"></div>
                    </div>
                    <div class="col-3 text-center">
                        <div class="text-muted small">平均亏损</div>
                        <div id="ew_avgLoss" class="fw-bold fs-6 text-danger"></div>
                    </div>
                    <div class="col-3 text-center">
                        <div class="text-muted small">最大盈利</div>
                        <div id="ew_maxWin" class="fw-bold fs-6 text-success"></div>
                    </div>
                    <div class="col-3 text-center">
                        <div class="text-muted small">最大亏损</div>
                        <div id="ew_maxLoss" class="fw-bold fs-6 text-danger"></div>
                    </div>
                </div>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        <div class="card shadow-sm dashboard-card" data-id="session" data-span="4" style="grid-column:span 4;min-width:320px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>Session</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#sessionBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body p-3 dashboard-card-body" id="sessionBody">
                <table class="table table-sm table-bordered mb-0">
                    <thead><tr><th class="text-end"></th><th class="text-center">RTH</th><th class="text-center">ETH</th></tr></thead>
                    <tbody>
                        <tr><th class="text-end">交易数</th><td class="text-center" id="ew_rthTrades"></td><td class="text-center" id="ew_ethTrades"></td></tr>
                        <tr><th class="text-end">胜率</th><td class="text-center" id="ew_rthWinRate"></td><td class="text-center" id="ew_ethWinRate"></td></tr>
                        <tr><th class="text-end">平均盈利</th><td class="text-center" id="ew_rthAvgWin"></td><td class="text-center" id="ew_ethAvgWin"></td></tr>
                        <tr><th class="text-end">平均亏损</th><td class="text-center" id="ew_rthAvgLoss"></td><td class="text-center" id="ew_ethAvgLoss"></td></tr>
                        <tr><th class="text-end">盈亏比</th><td class="text-center" id="ew_rthProfitFactor"></td><td class="text-center" id="ew_ethProfitFactor"></td></tr>
                        <tr><th class="text-end">数学期望</th><td class="text-center" id="ew_rthMathExp"></td><td class="text-center" id="ew_ethMathExp"></td></tr>                        
                        <tr><th class="text-end">总净利润</th><td class="text-center" id="ew_rthTotalProfit"></td><td class="text-center" id="ew_ethTotalProfit"></td></tr>
                    </tbody>
                </table>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        
        <!-- 新增：交易品种分析卡片 -->
        <div class="card shadow-sm dashboard-card" data-id="symbols" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>🎯 Symbol Analysis</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#symbolsBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body p-3 dashboard-card-body" id="symbolsBody">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="text-muted small mb-1">交易品种数</div>
                            <div id="ew_symbolCount" class="fw-bold fs-4">0</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="text-muted small mb-1">最佳品种</div>
                            <div id="ew_bestSymbol" class="fw-bold fs-6 text-success">-</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="text-muted small mb-1">最差品种</div>
                            <div id="ew_worstSymbol" class="fw-bold fs-6 text-danger">-</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="text-muted small mb-1">主要品种</div>
                            <div id="ew_mainSymbol" class="fw-bold fs-6 text-info">-</div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr class="table-light">
                                <th>品种</th>
                                <th class="text-center">交易数</th>
                                <th class="text-center">胜率</th>
                                <th class="text-center">总盈亏</th>
                                <th class="text-center">平均盈亏</th>
                                <th class="text-center">盈亏比</th>
                                <th class="text-center">数学期望</th>
                            </tr>
                        </thead>
                        <tbody id="ew_symbolsTableBody">
                            <tr>
                                <td colspan="7" class="text-center text-muted">暂无数据</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        
        <!-- 新增：做多/做空分析卡片 -->
        <div class="card shadow-sm dashboard-card" data-id="direction" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>📈 Long vs Short</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#directionBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body p-3 dashboard-card-body" id="directionBody">
                <table class="table table-sm table-bordered mb-0">
                    <thead><tr><th class="text-end"></th><th class="text-center">Long</th><th class="text-center">Short</th></tr></thead>
                    <tbody>
                        <tr><th class="text-end">交易数</th><td class="text-center" id="ew_longTrades"></td><td class="text-center" id="ew_shortTrades"></td></tr>
                        <tr><th class="text-end">胜率</th><td class="text-center" id="ew_longWinRate"></td><td class="text-center" id="ew_shortWinRate"></td></tr>
                        <tr><th class="text-end">平均盈利</th><td class="text-center" id="ew_longAvgWin"></td><td class="text-center" id="ew_shortAvgWin"></td></tr>
                        <tr><th class="text-end">平均亏损</th><td class="text-center" id="ew_longAvgLoss"></td><td class="text-center" id="ew_shortAvgLoss"></td></tr>
                        <tr><th class="text-end">盈亏比</th><td class="text-center" id="ew_longProfitFactor"></td><td class="text-center" id="ew_shortProfitFactor"></td></tr>
                        <tr><th class="text-end">数学期望</th><td class="text-center" id="ew_longMathExp"></td><td class="text-center" id="ew_shortMathExp"></td></tr>                        
                        <tr><th class="text-end">总净利润</th><td class="text-center" id="ew_longTotalProfit"></td><td class="text-center" id="ew_shortTotalProfit"></td></tr>
                    </tbody>
                </table>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        
        <!-- 新增：开仓侧分析卡片 -->
        <div class="card shadow-sm dashboard-card" data-id="side" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>🎯 Side Analysis</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#sideBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body p-3 dashboard-card-body" id="sideBody">
                <table class="table table-sm table-bordered mb-0">
                    <thead><tr><th class="text-end"></th><th class="text-center">Left</th><th class="text-center">Right</th><th class="text-center">Mid</th></tr></thead>
                    <tbody>
                        <tr><th class="text-end">交易数</th><td class="text-center" id="ew_leftTrades"></td><td class="text-center" id="ew_rightTrades"></td><td class="text-center" id="ew_midTrades"></td></tr>
                        <tr><th class="text-end">胜率</th><td class="text-center" id="ew_leftWinRate"></td><td class="text-center" id="ew_rightWinRate"></td><td class="text-center" id="ew_midWinRate"></td></tr>
                        <tr><th class="text-end">平均盈利</th><td class="text-center" id="ew_leftAvgWin"></td><td class="text-center" id="ew_rightAvgWin"></td><td class="text-center" id="ew_midAvgWin"></td></tr>
                        <tr><th class="text-end">平均亏损</th><td class="text-center" id="ew_leftAvgLoss"></td><td class="text-center" id="ew_rightAvgLoss"></td><td class="text-center" id="ew_midAvgLoss"></td></tr>
                        <tr><th class="text-end">盈亏比</th><td class="text-center" id="ew_leftProfitFactor"></td><td class="text-center" id="ew_rightProfitFactor"></td><td class="text-center" id="ew_midProfitFactor"></td></tr>
                        <tr><th class="text-end">数学期望</th><td class="text-center" id="ew_leftMathExp"></td><td class="text-center" id="ew_rightMathExp"></td><td class="text-center" id="ew_midMathExp"></td></tr>                        
                        <tr><th class="text-end">总净利润</th><td class="text-center" id="ew_leftTotalProfit"></td><td class="text-center" id="ew_rightTotalProfit"></td><td class="text-center" id="ew_midTotalProfit"></td></tr>
                    </tbody>
                </table>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        
        <!-- 新增：自定义图表卡片 -->
        <div class="card shadow-sm dashboard-card" data-id="custom-chart" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>📊 Custom Chart</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#customChartBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body p-3 dashboard-card-body" id="customChartBody">
                <!-- 过滤条件显示区域 -->
                <div id="chartFilterDisplay" class="mb-3" style="display: none;">
                    <div class="alert alert-info mb-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-filter me-2"></i>
                                <strong>当前过滤条件:</strong>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="ew_clearChartFilters()">
                                <i class="fas fa-times me-1"></i>清除过滤
                            </button>
                        </div>
                        <div id="chartFilterList" class="mt-2 small">
                            <!-- 过滤条件列表 -->
                        </div>
                    </div>
                </div>
                
                <!-- 快速配置按钮 -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-muted fw-bold">快速配置</small>
                        <div class="d-flex gap-1">
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="ew_showQuickConfigManager()">
                                <i class="fas fa-cog me-1"></i>管理
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="ew_refreshQuickConfigs()">
                                <i class="fas fa-refresh me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div id="quickConfigButtons" class="d-flex flex-wrap gap-2 mb-3">
                        <!-- 快速配置按钮将动态加载 -->
                        <div class="text-center w-100 text-muted small">
                            <i class="fas fa-spinner fa-spin me-1"></i>正在加载快速配置...
                        </div>
                    </div>
                    
                    <style>
                        .quick-config-btn {
                            font-size: 12px;
                            padding: 4px 8px;
                            border-radius: 15px;
                            white-space: nowrap;
                            transition: all 0.2s ease;
                        }
                        
                        .quick-config-btn:hover {
                            transform: translateY(-1px);
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                        }
                        
                        .quick-config-btn:active {
                            transform: translateY(0);
                        }
                        
                        .quick-config-btn.active {
                            background-color: #28a745;
                            border-color: #28a745;
                            color: white;
                        }
                        
                        #quickConfigButtons {
                            max-height: 150px;
                            overflow-y: auto;
                        }
                        
                        #quickConfigButtons::-webkit-scrollbar {
                            width: 4px;
                        }
                        
                        #quickConfigButtons::-webkit-scrollbar-track {
                            background: #f1f1f1;
                            border-radius: 2px;
                        }
                        
                        #quickConfigButtons::-webkit-scrollbar-thumb {
                            background: #c1c1c1;
                            border-radius: 2px;
                        }
                        
                        #quickConfigButtons::-webkit-scrollbar-thumb:hover {
                            background: #a8a8a8;
                        }
                    </style>
                </div>
                
                <div class="text-center py-4">
                    <button type="button" class="btn btn-success btn-sm me-2" onclick="ew_addNewChart()">
                        <i class="fas fa-plus me-1"></i>添加图表
                    </button>
                    <button type="button" class="btn btn-primary btn-sm me-2" onclick="ew_showChartConfig()">
                        <i class="fas fa-cog me-1"></i>配置图表
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm me-2" onclick="ew_saveMultiChartState()" title="手动保存当前图表状态">
                        <i class="fas fa-save me-1"></i>保存状态
                    </button>
                    <button type="button" class="btn btn-info btn-sm me-2" onclick="ew_refreshAllCharts()" title="刷新所有图表">
                        <i class="fas fa-sync-alt me-1"></i>全部刷新
                    </button>
                    <button type="button" class="btn btn-warning btn-sm" onclick="ew_clearAllCharts()" title="清除所有图表">
                        <i class="fas fa-trash-alt me-1"></i>清空
                    </button>
                </div>
                
                <!-- 多图表容器 -->
                <div id="multiChartContainer" class="chart-grid">
                    <!-- 多个图表将在这里动态添加 -->
                </div>
                
                <!-- 图表配置面板（隐藏） -->
                <div id="chartConfigPanel" style="display:none;">
                    <div class="card mt-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">📊 高级图表配置</h6>
                            <div>
                                <span id="currentChartTitle" class="text-muted me-3">当前配置: 新图表</span>
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="ew_hideChartConfig()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- 步骤1: 数据过滤 -->
                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <span class="badge bg-primary me-2">1</span>数据过滤
                                </h6>
                                <div class="border rounded p-3 bg-light">
                                    <div id="chartFilterConditions">
                                        <!-- 动态添加过滤条件 -->
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ew_addChartFilter()">
                                        <i class="fas fa-plus me-1"></i>添加过滤条件
                                    </button>
                                    <div class="mt-2 text-muted small">
                                        <span id="chartFilterStatus">无过滤条件 - 将使用所有交易数据</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤2: 图表类型 -->
                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <span class="badge bg-primary me-2">2</span>图表类型
                                </h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <select id="chartType" class="form-select">
                                            <option value="bar">📊 柱状图</option>
                                            <option value="line">📈 折线图</option>
                                            <option value="pie">🥧 饼图</option>
                                            <option value="doughnut">🍩 环形图</option>
                                            <option value="polarArea">🎯 极坐标图</option>
                                            <option value="radar">🕸️ 雷达图</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤3: X轴配置 -->
                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <span class="badge bg-primary me-2">3</span>X轴配置
                                </h6>
                                <div class="border rounded p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">字段</label>
                                            <select id="xField" class="form-select mb-3">
                                                <!-- 基本信息 -->
                                                <option value="index">序号</option>
                                                <option value="trade_id">交易ID</option>
                                                <option value="symbol">品种</option>
                                                <option value="direction">方向 (Long/Short)</option>
                                                <option value="side">边 (Left/Right)</option>
                                                <option value="trade_type">交易类型</option>
                                                <option value="session">交易时段</option>
                                                <option value="nth_trade">第N笔交易</option>
                                                
                                                <!-- 价格和数量 -->
                                                <option value="open_price">开仓价格</option>
                                                <option value="close_price">平仓价格</option>
                                                <option value="open_qty">开仓手数</option>
                                                <option value="close_qty">平仓手数</option>
                                                
                                                <!-- 时间相关 -->
                                                <option value="open_datetime">开仓时间</option>
                                                <option value="close_datetime">平仓时间</option>
                                                <option value="holding_time">持仓时间</option>
                                                <option value="open_date">开仓日期</option>
                                                <option value="close_date">平仓日期</option>
                                                <option value="month">月份</option>
                                                <option value="weekday">星期</option>
                                                <option value="hour">小时</option>
                                                
                                                <!-- 订单类型 -->
                                                <option value="open_order_type">开仓订单类型</option>
                                                <option value="close_order_type">平仓订单类型</option>
                                                
                                                <!-- 盈亏相关 -->
                                                <option value="net_profit">净利润</option>
                                                <option value="gross_profit">总利润</option>
                                                <option value="commission">手续费</option>
                                                <option value="point_profit_per_lot">每手点数盈亏</option>
                                                <option value="total_points">总点数</option>
                                                
                                                <!-- 浮盈浮亏 -->
                                                <option value="max_floating_profit_points">最大浮盈点数</option>
                                                <option value="max_floating_profit_dollars">最大浮盈金额</option>
                                                <option value="max_floating_loss_points">最大浮亏点数</option>
                                                <option value="max_floating_loss_dollars">最大浮亏金额</option>
                                                
                                                <!-- 交易原因 -->
                                                <option value="entry_reason">入场理由</option>
                                                <option value="exit_reason">出场理由</option>
                                                
                                                <!-- 止损止盈 -->
                                                <option value="stop_loss_price">止损价格</option>
                                                <option value="stop_loss_reason">止损理由</option>
                                                <option value="take_profit_price">止盈价格</option>
                                                <option value="take_profit_reason">止盈理由</option>
                                                
                                                <!-- 评价指标 -->
                                                <option value="rating">交易评分</option>
                                                <option value="evaluation">交易评价</option>
                                                <option value="open_rrr">开仓RRR</option>
                                                <option value="close_rrr">平仓RRR</option>
                                                <option value="fwr">FWR比率</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">排序方式</label>
                                            <select id="xSort" class="form-select mb-3">
                                                <option value="label_asc">标签升序</option>
                                                <option value="label_desc">标签降序</option>
                                                <option value="value_asc">数值升序</option>
                                                <option value="value_desc">数值降序</option>
                                                <option value="count_desc">数量降序</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="xIncludeEmpty" checked>
                                                <label class="form-check-label" for="xIncludeEmpty">
                                                    包含空值记录
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">最大显示数量</label>
                                            <select id="xMaxItems" class="form-select">
                                                <option value="10">10个</option>
                                                <option value="20">20个</option>
                                                <option value="50">50个</option>
                                                <option value="-1">全部</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <!-- 分段基数功能 -->
                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="xEnableBinning">
                                                <label class="form-check-label" for="xEnableBinning">
                                                    <strong>启用分段基数</strong> <small class="text-muted">(将连续数值分成区间)</small>
                                                </label>
                                            </div>
                                            
                                            <div id="xBinningConfig" class="border rounded p-3 bg-light" style="display: none;">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <label class="form-label">分段方式</label>
                                                        <select id="xBinningMethod" class="form-select mb-3">
                                                            <option value="fixed_size">固定区间大小</option>
                                                            <option value="fixed_count">固定区间数量</option>
                                                            <option value="percentile">百分位分段</option>
                                                            <option value="auto">自动最佳分段</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" id="xBinningValueLabel">区间大小</label>
                                                        <input type="number" id="xBinningValue" class="form-control mb-3" value="100" min="1" step="any">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label">标签格式</label>
                                                        <select id="xBinningFormat" class="form-select mb-3">
                                                            <option value="range">区间范围 (0-100)</option>
                                                            <option value="center">中心值 (50)</option>
                                                            <option value="lower">下限值 (0)</option>
                                                            <option value="upper">上限值 (100)</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="xBinningIncludeEmpty">
                                                            <label class="form-check-label" for="xBinningIncludeEmpty">
                                                                包含空区间
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="xBinningRoundValues" checked>
                                                            <label class="form-check-label" for="xBinningRoundValues">
                                                                自动舍入边界
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤4: Y轴配置 -->
                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <span class="badge bg-primary me-2">4</span>Y轴配置
                                </h6>
                                <div class="border rounded p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">字段</label>
                                            <select id="yField" class="form-select mb-3">
                                                <!-- 统计指标 -->
                                                <option value="count">记录数量</option>
                                                <option value="win_rate">胜率</option>
                                                <option value="profit_factor">盈亏比</option>
                                                <option value="average_win">平均盈利</option>
                                                <option value="average_loss">平均亏损</option>
                                                
                                                <!-- 盈亏相关 -->
                                                <option value="net_profit">净利润</option>
                                                <option value="gross_profit">总利润</option>
                                                <option value="commission">手续费</option>
                                                <option value="point_profit_per_lot">每手点数盈亏</option>
                                                <option value="total_points">总点数</option>
                                                
                                                <!-- 价格和数量 -->
                                                <option value="open_price">开仓价格</option>
                                                <option value="close_price">平仓价格</option>
                                                <option value="open_qty">开仓手数</option>
                                                <option value="close_qty">平仓手数</option>
                                                
                                                <!-- 浮盈浮亏 -->
                                                <option value="max_floating_profit_points">最大浮盈点数</option>
                                                <option value="max_floating_profit_dollars">最大浮盈金额</option>
                                                <option value="max_floating_loss_points">最大浮亏点数</option>
                                                <option value="max_floating_loss_dollars">最大浮亏金额</option>
                                                
                                                <!-- 止损止盈 -->
                                                <option value="stop_loss_price">止损价格</option>
                                                <option value="take_profit_price">止盈价格</option>
                                                
                                                <!-- 评价指标 -->
                                                <option value="rating">交易评分</option>
                                                <option value="open_rrr">开仓RRR</option>
                                                <option value="close_rrr">平仓RRR</option>
                                                <option value="fwr">FWR比率</option>
                                                
                                                <!-- 时间相关 -->
                                                <option value="holding_time_minutes">持仓时间(分钟)</option>
                                                <option value="nth_trade">第N笔交易</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">聚合方式</label>
                                            <select id="aggregation" class="form-select mb-3">
                                                <option value="sum">求和</option>
                                                <option value="avg">平均值</option>
                                                <option value="count">计数</option>
                                                <option value="max">最大值</option>
                                                <option value="min">最小值</option>
                                                <option value="median">中位数</option>
                                                <option value="stddev">标准差</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">颜色方案</label>
                                            <select id="colorScheme" class="form-select">
                                                <option value="default">默认色彩</option>
                                                <option value="profit_loss">盈亏色彩</option>
                                                <option value="performance">表现色彩</option>
                                                <option value="rainbow">彩虹色彩</option>
                                                <option value="monochrome">单色系</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">数值格式</label>
                                            <select id="valueFormat" class="form-select">
                                                <option value="auto">自动</option>
                                                <option value="currency">货币($)</option>
                                                <option value="percentage">百分比(%)</option>
                                                <option value="decimal">小数</option>
                                                <option value="integer">整数</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤5: 高级选项 -->
                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <span class="badge bg-primary me-2">5</span>高级选项
                                </h6>
                                <div class="border rounded p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="checkbox" id="showDataLabels" checked>
                                                <label class="form-check-label" for="showDataLabels">
                                                    显示数据标签
                                                </label>
                                            </div>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="checkbox" id="showLegend" checked>
                                                <label class="form-check-label" for="showLegend">
                                                    显示图例
                                                </label>
                                            </div>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="checkbox" id="enableAnimation" checked>
                                                <label class="form-check-label" for="enableAnimation">
                                                    启用动画
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">图表标题</label>
                                            <input type="text" id="chartTitle" class="form-control mb-2" placeholder="自定义图表标题">
                                            <label class="form-label">图表高度</label>
                                            <select id="chartHeight" class="form-select">
                                                <option value="300">小 (300px)</option>
                                                <option value="400" selected>中 (400px)</option>
                                                <option value="500">大 (500px)</option>
                                                <option value="600">超大 (600px)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 图表配置保存管理 -->
                            <div class="mb-3">
                                <h6 class="text-primary mb-3">
                                    <span class="badge bg-primary me-2">6</span>图表配置管理
                                </h6>
                                <div class="border rounded p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">保存当前配置</label>
                                            <div class="input-group">
                                                <input type="text" id="chartConfigName" class="form-control" placeholder="请输入配置名称">
                                                <button type="button" class="btn btn-success" onclick="ew_saveChartConfig()">
                                                    <i class="fas fa-save"></i> 保存
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">加载已保存配置</label>
                                            <div class="input-group">
                                                <select id="savedChartConfigs" class="form-select">
                                                    <option value="">选择已保存的配置...</option>
                                                </select>
                                                <button type="button" class="btn btn-primary" onclick="ew_loadChartConfig()">
                                                    <i class="fas fa-upload"></i> 加载
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary" onclick="ew_showChartConfigManager()">
                                                    <i class="fas fa-cog"></i> 管理
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="d-flex gap-2 justify-content-end">
                                <button type="button" class="btn btn-outline-secondary" onclick="ew_resetChartConfig()">
                                    <i class="fas fa-undo me-1"></i>重置
                                </button>
                                <button type="button" class="btn btn-outline-primary" onclick="ew_previewChartData()">
                                    <i class="fas fa-eye me-1"></i>预览数据
                                </button>
                                <button type="button" class="btn btn-primary" onclick="ew_updateCustomChart()">
                                    <i class="fas fa-chart-bar me-1"></i>生成图表
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 原单图表容器保留作为兼容，但隐藏 -->
                <div id="customChartContainer" style="height:300px;display:none;">
                    <canvas id="customChart" style="width: 100% !important; height: 100% !important; max-width: 100%; display: block;"></canvas>
                </div>
                <!-- 无数据提示 -->
                <div id="noDataMessage" class="text-center py-4" style="display:none;">
                    <i class="fas fa-chart-bar fa-3x mb-3 text-muted"></i>
                    <h5>暂无数据</h5>
                    <p class="text-muted">请配置图表参数</p>
                </div>
                
                <!-- 多图表样式 -->
                <style>
                    .chart-instance {
                        border: 1px solid #dee2e6;
                        border-radius: 8px;
                        margin-bottom: 20px;
                        background: white;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                    }
                    
                    .chart-instance-header {
                        background: linear-gradient(135deg, #007bff, #0056b3);
                        color: white;
                        padding: 10px 15px;
                        border-radius: 8px 8px 0 0;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    
                    .chart-instance-title {
                        font-weight: bold;
                        flex-grow: 1;
                    }
                    
                    .chart-instance-controls {
                        display: flex;
                        gap: 5px;
                    }
                    
                    .chart-instance-body {
                        padding: 15px;
                        position: relative;
                    }
                    
                    .chart-canvas-container {
                        position: relative;
                        width: 100%;
                        height: 400px;
                    }
                    
                                            .chart-canvas-container canvas {
                            width: 100% !important;
                            height: 100% !important;
                            max-width: 100%;
                            display: block;
                        }
                        
                        /* 图表网格布局 */
                        .chart-grid {
                            display: grid;
                            grid-template-columns: repeat(4, 1fr);
                            gap: 1.5rem;
                            margin-top: 1rem;
                        }
                        
                        /* 图表实例样式 */
                        .chart-instance {
                            background: white;
                            border-radius: 0.5rem;
                            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                            border: 1px solid rgba(0, 0, 0, 0.125);
                            min-width: 300px;
                            position: relative;
                        }
                        
                        /* 图表跨度控制 */
                        .chart-instance[data-span="1"] { grid-column: span 1; }
                        .chart-instance[data-span="2"] { grid-column: span 2; }
                        .chart-instance[data-span="3"] { grid-column: span 3; }
                        .chart-instance[data-span="4"] { grid-column: span 4; }
                        
                        /* 图表标题栏 */
                        .chart-instance-header {
                            background: linear-gradient(135deg, #2c3e50, #34495e);
                            color: white;
                            padding: 0.75rem 1rem;
                            border-radius: 0.5rem 0.5rem 0 0;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: bold;
                        }
                        
                        .chart-instance-title {
                            flex: 1;
                            font-size: 1.1rem;
                        }
                        
                        .chart-instance-controls {
                            display: flex;
                            gap: 0.25rem;
                        }
                        
                        .chart-instance-controls .btn {
                            padding: 0.25rem 0.5rem;
                            font-size: 0.875rem;
                        }
                        
                        /* 图表主体 */
                        .chart-instance-body {
                            padding: 1rem;
                        }
                        
                        .chart-config-summary {
                            font-size: 0.875rem;
                            color: #6c757d;
                            margin-bottom: 0.75rem;
                            padding: 0.5rem;
                            background: #f8f9fa;
                            border-radius: 0.25rem;
                            border-left: 3px solid #007bff;
                        }
                        
                        /* 大小调整控件 */
                        .chart-size-controls {
                            display: flex;
                            gap: 0.25rem;
                            margin-left: 0.5rem;
                        }
                        
                        .chart-size-btn {
                            width: 24px;
                            height: 24px;
                            border: 1px solid rgba(255,255,255,0.3);
                            background: rgba(255,255,255,0.1);
                            color: white;
                            border-radius: 0.25rem;
                            font-size: 0.75rem;
                            cursor: pointer;
                            transition: all 0.2s;
                        }
                        
                        .chart-size-btn:hover {
                            background: rgba(255,255,255,0.2);
                            border-color: rgba(255,255,255,0.5);
                        }
                        
                        .chart-size-btn.active {
                            background: rgba(255,255,255,0.3);
                            border-color: rgba(255,255,255,0.7);
                        }
                        
                        /* 空状态提示 */
                        .multi-chart-empty {
                            text-align: center;
                            padding: 3rem 1rem;
                            color: #6c757d;
                            grid-column: span 4;
                        }
                        
                        .multi-chart-empty i {
                            color: #dee2e6;
                        }
                        
                        /* 日期过滤器样式 */
                        .date-filter-container {
                            width: 100%;
                        }
                        
                        .date-filter-container .input-group {
                            width: 100%;
                        }
                        
                        .date-filter-container .dropdown-menu {
                            font-size: 0.875rem;
                        }
                        
                        .date-filter-container .dropdown-item {
                            padding: 0.375rem 0.75rem;
                        }
                        
                        .date-filter-container .dropdown-item:hover {
                            background-color: #e9ecef;
                        }
                        
                        /* 时间持续输入框样式 */
                        .time-duration-container {
                            width: 100%;
                        }
                        
                        .time-duration-container .input-group-text {
                            background-color: #e9ecef;
                            border-color: #ced4da;
                            color: #6c757d;
                        }
                        
                        .time-duration-container .form-text {
                            font-size: 0.75rem;
                            margin-top: 0.25rem;
                        }
                    
                    .chart-loading, .chart-no-data {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        text-align: center;
                        color: #6c757d;
                    }
                    
                    .chart-config-summary {
                        background: #f8f9fa;
                        border-radius: 4px;
                        padding: 8px 12px;
                        margin-bottom: 10px;
                        font-size: 12px;
                        color: #6c757d;
                    }
                    
                    .multi-chart-empty {
                        text-align: center;
                        padding: 40px 20px;
                        color: #6c757d;
                    }
                </style>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>

        
        <div class="card shadow-sm dashboard-card" data-id="topk" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>Best & Worst</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#topkBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body p-3 dashboard-card-body" id="topkBody">
                <div class="d-flex align-items-center mb-2">
                    <label for="ew_maxN" class="form-label me-2 mb-0">K值：</label>
                    <input type="number" id="ew_maxN" value="5" min="1" max="100" style="width:80px;" class="form-control form-control-sm me-2">
                    <button class="btn btn-sm btn-orange" id="ew_refreshStats">刷新</button>
                </div>
                <div class="row">
                    <div class="col-12 col-md-6">
                        <h6 id="ew_maxNLossTitle" class="text-center text-danger fw-bold fs-5">Worst 5</h6>
                        <table class="table table-sm table-striped text-center align-middle">
                            <thead><tr id="ew_maxNLossTableHeader">
                                <!-- Headers will be dynamically generated -->
                            </tr></thead>
                            <tbody id="ew_maxNLossBody"></tbody>
                        </table>
                    </div>
                    <div class="col-12 col-md-6">
                        <h6 id="ew_maxNWinTitle" class="text-center text-success fw-bold fs-5">Best 5</h6>
                        <table class="table table-sm table-striped text-center align-middle">
                            <thead><tr id="ew_maxNWinTableHeader">
                                <!-- Headers will be dynamically generated -->
                            </tr></thead>
                            <tbody id="ew_maxNWinBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        <div class="card shadow-sm dashboard-card" data-id="calendar" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>Profit Calendar</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#calendarBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body dashboard-card-body" id="calendarBody">
                <div class="row g-3 mb-3"> <!-- mb-3 删除 -->
                    <div class="col-6 col-md-3">
                        <div class="card text-center">
                            <div class="card-body p-2">
                                <div class="text-muted">今日净利润</div>
                                <h3 id="ew_dayProfit" class="fw-bold"></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="card text-center">
                            <div class="card-body p-2">
                                <div class="text-muted">本周净利润</div>
                                <h3 id="ew_weekProfit" class="fw-bold"></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="card text-center">
                            <div class="card-body p-2">
                                <div class="text-muted">本月净利润</div>
                                <h3 id="ew_monthProfit" class="fw-bold"></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="card text-center">
                            <div class="card-body p-2">
                                <div class="text-muted">本年净利润</div>
                                <h3 id="ew_yearProfit" class="fw-bold"></h3>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Edgewonk风格日历模块 -->
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="d-flex align-items-center gap-2">
                                <button id="ew_viewDay" class="btn btn-sm btn-orange px-3 active">日</button>
                                <button id="ew_viewWeek" class="btn btn-sm btn-orange px-3">周</button>
                                <button id="ew_viewMonth" class="btn btn-sm btn-orange px-3">月</button>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <button id="ew_prevPeriod" class="btn btn-sm btn-orange px-2"><i class="fas fa-chevron-left"></i></button>
                                <span id="ew_calendarLabel" style="min-width:110px;text-align:center;font-weight:bold;"></span>
                                <button id="ew_nextPeriod" class="btn btn-sm btn-orange px-2"><i class="fas fa-chevron-right"></i></button>
                            </div>
                        </div>
                        <div id="ew_profitCalendar" class="d-flex flex-wrap" style="gap:8px;"></div>
                    </div>
                </div>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>
        <div class="card shadow-sm dashboard-card" data-id="equity" data-span="4" style="grid-column:span 4;min-width:400px;">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg, #2c3e50, #34495e)!important;color:#ffffff!important;font-size:1.2rem!important;line-height:1.4!important;">
                <span>Curves</span>
                <button type="button" class="btn btn-sm btn-light dashboard-toggle-btn dashboard-collapse-btn" data-target="#equityBody" style="font-size:1.2rem;line-height:1;">-</button>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center dashboard-card-body" id="equityBody" style="height:400px;max-height:400px;overflow:auto;">
                <canvas id="ew_equityCurveChart" style="width:100%;height:320px;max-height:100%;"></canvas>
            </div>
            <div class="resize-handle" style="position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;"></div>
        </div>

    </div>
</div>

<!-- 统计页面配置模态窗口 -->
<div class="modal fade" id="statisticsConfigModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">统计页面配置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="fw-bold">模态窗口列配置</h6>
                        <div id="modalColumnsConfig" class="border p-3 mb-3" style="max-height: 400px; overflow-y: auto;">
                            <!-- 动态生成列配置 -->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-bold">Best/Worst窗口列配置</h6>
                        <div id="bestWorstColumnsConfig" class="border p-3 mb-3" style="max-height: 400px; overflow-y: auto;">
                            <!-- 动态生成列配置 -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h6 class="fw-bold">其他设置</h6>
                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-label">默认K值</label>
                                <input type="number" id="defaultKValue" class="form-control" min="1" max="50" value="5">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">默认视图</label>
                                <select id="defaultView" class="form-select">
                                    <option value="day">日视图</option>
                                    <option value="week">周视图</option>
                                    <option value="month">月视图</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveStatisticsConfig">保存配置</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加模态窗口 -->
<div class="modal fade" id="periodDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <!-- 模态窗口结构（只展示header部分，body部分保持不变） -->
            <div class="modal-header d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <h5 class="modal-title" id="periodDetailModalLabel"><span id="modal-title"></span></h5>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button id="modal-prev-btn" class="btn btn-sm btn-outline-secondary" title="上一个"><i class="fas fa-chevron-left"></i></button>
                    <button id="modal-next-btn" class="btn btn-sm btn-outline-secondary" title="下一个"><i class="fas fa-chevron-right"></i></button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 text-center">
                                        <div class="text-muted small mb-1">总净利润</div>
                                        <div id="modal_totalProfit" class="fw-bold fs-4"></div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="text-muted small mb-1">总交易数</div>
                                        <div id="modal_totalTrades" class="fw-bold fs-4"></div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="text-muted small mb-1">胜率</div>
                                        <div id="modal_winRate" class="fw-bold fs-4"></div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="text-muted small mb-1">盈亏比</div>
                                        <div id="modal_profitFactor" class="fw-bold fs-4"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增 trade-based/day-based 统计卡片 -->
                <div class="row mb-4" id="modal_stats_row">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <h6 class="card-title mb-2 text-center fw-bold">Trade-based</h6>
                                <div class="d-flex justify-content-between mb-1">
                                    <span>胜率:</span>
                                    <span id="modal_trade_winrate"></span>
                                </div>
                                <div class="d-flex justify-content-between mb-1">
                                    <span>盈亏比:</span>
                                    <span id="modal_trade_rrr"></span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>数学期望:</span>
                                    <span id="modal_trade_math_exp"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <h6 class="card-title mb-2 text-center fw-bold">Day-based</h6>
                                <div class="d-flex justify-content-between mb-1">
                                    <span>胜率:</span>
                                    <span id="modal_day_winrate"></span>
                                </div>
                                <div class="d-flex justify-content-between mb-1">
                                    <span>盈亏比:</span>
                                    <span id="modal_day_rrr"></span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>数学期望:</span>
                                    <span id="modal_day_math_exp"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title mb-3">逐笔盈亏</h6>
                                <div style="height:200px;">
                                    <canvas id="modal_tradeBarChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title mb-3">交易明细</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover" id="modal_tradesTable">
                                        <thead>
                                            <tr id="modal_tradesTableHeader">
                                                <!-- Headers will be dynamically generated -->
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 过滤器管理模态框 -->
<div class="modal fade" id="filterManageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">过滤器管理</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="savedFiltersManage">
                    <p class="text-muted">暂无保存的过滤器</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 交易详情模态框 -->
<div class="modal fade" id="tradeDetailsModal" tabindex="-1" aria-labelledby="tradeDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tradeDetailsTitle">交易详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="tradeDetailsBody">
                <!-- 交易详情内容将在这里显示 -->
            </div>
        </div>
    </div>
</div>

<!-- 图表配置管理模态框 -->
<div class="modal fade" id="chartConfigManagerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">图表配置管理</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="chartConfigList">
                    <!-- 图表配置列表将在这里显示 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 快速配置管理模态框 -->
<div class="modal fade" id="quickConfigManagerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-tachometer-alt me-2"></i>快速配置管理
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>说明：</strong>快速配置会显示在配置面板上方，最多显示10个。您可以拖拽调整顺序，选择显示/隐藏。
                </div>
                
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">当前快速配置 (拖拽调整顺序)</h6>
                    <button type="button" class="btn btn-sm btn-primary" onclick="ew_addToQuickConfigs()">
                        <i class="fas fa-plus me-1"></i>从所有配置中添加
                    </button>
                </div>
                
                <div id="quickConfigList" class="border rounded p-3 mb-3" style="min-height: 200px;">
                    <!-- 快速配置列表将在这里显示 -->
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label">显示数量限制</label>
                        <input type="number" id="quickConfigLimit" class="form-control" value="10" min="1" max="20">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">按钮样式</label>
                        <select id="quickConfigStyle" class="form-select">
                            <option value="outline">边框样式 (默认)</option>
                            <option value="filled">填充样式</option>
                            <option value="rounded">圆角样式</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="ew_saveQuickConfigSettings()">
                    <i class="fas fa-save me-1"></i>保存设置
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加配置到快速配置选择模态框 -->
<div class="modal fade" id="addQuickConfigModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>添加快速配置
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>说明：</strong>从现有配置中选择要添加到快速配置的项目。
                </div>
                
                <div id="availableConfigsList">
                    <!-- 可用配置列表将在这里显示 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirmAddConfigs">
                    <i class="fas fa-plus me-1"></i>添加选中的配置
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/static/js/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<link rel="stylesheet" href="/static/css/statistics.css">
<script src="/static/js/statistics.js"></script>

<script>
$(document).ready(function() {
    // 初始化过滤器选项
    initializeFilters();
    
    // 加载保存的过滤器
    loadSavedFilters();
    
    // 绑定过滤器按钮事件
    $('#applyFilter').on('click', function() {
        console.log("应用过滤按钮被点击");
        applyFilters();
    });
    $('#clearFilter').on('click', function() {
        console.log("清空过滤按钮被点击");
        clearFilters();
    });
    $('#saveFilter').on('click', saveCurrentFilter);
    $('#manageFilters').on('click', showManageFiltersModal);
    
    // 绑定过滤器面板切换
    $('#filterToggle').on('click', function() {
        $('#filterPanel').slideToggle();
    });
    
    // 初始加载统计数据
    let n = parseInt($('#ew_maxN').val()) || 5;
    ew_fetchStats(n);
    
    // 初始化图表配置（延迟执行以确保数据加载完成）
    setTimeout(() => {
        if (window.ewStats) {
            ew_initCustomChartFilters(window.ewStats);
        }
        // 初始化图表配置
        ew_initChartConfig();
    }, 2000);
    
    // 添加调试信息
    console.log("统计页面已加载，过滤器调试工具可用");
    console.log("运行 runFullDebug() 来调试过滤器问题");
    

});
</script>
{% endblock %} 